<template>
  <div class="form-designer-icon-wrap">
    <el-popover
      popper-class="form-designer-icon-list-popover"
      placement="bottom-start"
      width="156"
      v-model="isIconPopover"
      trigger="click">
      <el-button slot="reference" type="text">
        <i :class="['iconfont',value]"></i>
      </el-button>
      <div class="form-designer-icon-list-container">
        <div v-for="icon in controlConfigs.options" :key="icon" @click="iconChange(icon)"
             :class="['form-designer-icon-item-wrap',icon === value ? 'checked' : '']">
          <i :class="['iconfont',icon]"></i>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import FormBase from './mixins/FormBase'

export default {
  name: 'FormIcon',
  mixins: [FormBase],
  data() {
    return {
      isIconPopover: false
    }
  },
  methods: {
    iconChange(icon) {
      this.value = icon
    }
  }
}
</script>

<style scoped lang="scss">
.form-designer-icon-wrap {

}
</style>

<style lang="scss">
.form-designer-icon-list-popover {
  padding: 8px;

  .iconfont {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #303133;
  }

  .form-designer-icon-list-container {
    width: 140px;
    display: flex;
    flex-wrap: wrap;
    max-height: 170px;
    overflow-y: scroll;

    .form-designer-icon-item-wrap {
      width: 30px;
      height: 30px;
      border-width: 2px;
      border-style: solid;
      border-color: transparent;

      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2px;
      cursor: pointer;

      &:hover {
        border-color: #67C23A;
      }
    }

    .checked {
      border-color: #409EFF !important;
    }
  }
}
</style>
